<template>
  <div class="readingDetails">
    <!--<van-nav-bar title="文章详情" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>-->
    <div class="details" v-if="data.info.content_type == '1'">
      <p class="title">{{data.info.title}}</p>
      <div class="menu">
        <img src="@/assets/images/menu1.png" alt="">
        <div class="div1" v-for="(item,index) in data.earn_score_menu" :key="index"
             @click="menuPath(item.type,item.url)">{{item.name}}
        </div>
      </div>
      <div class="detailsTip">
        <span>{{data.info.create_time}}</span>
        <span><img src="@/assets/images/ic_browse.png" alt="">{{data.info.pv}}</span>
      </div>
      <div id="wenzi" ref="content" v-html="$options.filters.unescape(data.info.content)">
      </div>
    </div>
    <div class="details" v-if="data.info.content_type == '2'">
      <p class="title">{{data.info.title}}</p>
      <div class="menu">
        <img src="@/assets/images/menu1.png" alt="">
        <div class="div1" v-for="(item,index) in data.earn_score_menu" :key="index"
             @click="menuPath(item.type,item.url)">{{item.name}}
        </div>
      </div>
      <div class="detailsTip">
        <span class="time">{{data.info.create_time}}</span>
        <span><img src="@/assets/images/ic_browse.png" alt="">{{data.info.pv}}</span>
      </div>
      <iframe :src="data.info.content_url" frameborder="false" sandbox="allow-scripts allow-same-origin"
              allowtransparency="true" id="detailsFrame" ref="detailsFrame" name="detailsFrame"
              style="width:100%"></iframe>
    </div>
    <div style="height: 1rem"></div>
    <div class="btn">
      <input class="togetherReadingBtn" type="button" value="好看在这" @click.stop="goPath('/togetherReading')">
      <input class="lobbyBtn" type="button" value="任务大厅" @click.stop="goPath('/lobby')">
    </div>
    <!--每日签到弹窗-->
    <dw-daily-attendance :show="show" @dailyAttendanceClose="dailyAttendanceClose"
                         ref="dailyAttendance"></dw-daily-attendance>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/10 0010 11:12.
   */
  import {Indicator} from 'mint-ui';
  import utils from '../../../lib/StringExtend'
  import dwDailyAttendance from './dailyAttendance.vue'

  export default {
    mounted() {
      this.iframeWidth = document.documentElement.clientWidth + 'px';
      this.form.article_id = this.$route.query.id;
      this.loadData();

    },
    components: {
      dwDailyAttendance
    },
    props: {},
    data() {
      return {
        // iframeHeight:undefined,
        iframeWidth: undefined,
        wechatId: utils.getCookie('wechat_id'),
        form: {
          article_id: undefined,
          open_id: undefined,
        },
        data: {
          earn_score_menu: [],
          info: {
            title: undefined,
            create_time: undefined,
            pv: undefined,
            content: undefined,
            content_type: undefined,
            content_url: undefined,
          },
          day_points_limit: undefined, //每日上限工分
          per_min: undefined,          //每次有效阅读时间，单位：分
          work_points: undefined,      //每次有效阅读获得工分

        },
        // 工分计时器器
        overTimer: null,
        // 是否超时
        isOvertime: false,
        //每日签到
        show: false,
        showData: {},
      }
    },
    computed: {},
    methods: {
      //详情数据
      loadData() {
        this.form.open_id = utils.getCookie('open_id_' + this.wechatId);
        Indicator.open('加载中...');
        this.$axios.articleGetArticledetail(this.form).then(res => {
          Indicator.close();
          if (res.errcode !== '000') {
            this.$toast(res.errmsg);
            return;
          }
          this.data = res.data;
          //给iframe加高度
          if (this.data.info.content_type == '2') {
            this.$nextTick(() => {
              document.getElementById('detailsFrame').style.height = document.documentElement.clientHeight + 'px';
            });
          } else {
            this.$nextTick(() => {

              if (document.getElementById('wenzi').getElementsByTagName("img")) {
                let imgArr = document.getElementById('wenzi').getElementsByTagName("img");
                for (let j in imgArr) {
                  if (imgArr[j].style === undefined) {
                    continue;
                  }
                  imgArr[j].style.width = '100%'
                }
              }

              if (document.getElementById('wenzi').getElementsByTagName("span")) {
                let spanArr = document.getElementById('wenzi').getElementsByTagName("span");
                for (let i in spanArr) {
                  if (spanArr[i].style === undefined) {
                    continue;
                  }
                  spanArr[i].innerText = this.$options.filters.unescape(spanArr[i].innerText)
                }
              }

            });
          }
          // 开启定时器
          var time = this.data.per_min * 60 * 1000;
          this.overTimer = setInterval(() => {
            this.getWorkpoints();
          }, time)
        })
      },

      //获取工分
      getWorkpoints() {
        this.$axios.articleSetScore(this.form).then(res => {
          this.$toast(res.errmsg);
        })
      },
      //返回
      onClickLeft() {
        this.$router.go(-1)
      },
      //菜单跳转
      menuPath(type, url) {
        if (type === 1) {
          /*
          * 每日签到
          * */
          this.$refs.dailyAttendance.loadData(url);
        } else if (type === 2) {
          this.$router.push({path: url.split('#')[1]})
        }
      },
      // 底部按钮跳转
      goPath(url){
        this.$router.push({path:url})
      },
      //关闭每日弹窗
      dailyAttendanceClose(val) {
        this.show = val;
      }
    },
    watch: {},
    filters: {},
    destroyed() {
      // 销毁定时器
      clearTimeout(this.overTimer)
    },
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>

  .detailsFrame {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .details {
    width: 100%;
    padding: 0.39rem;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;

    .menu {
      position: fixed;
      top: 0;
      right: 0;
      width: 1.6rem;
      z-index: 999;

      img {
        width: 100%;
        height: auto;
      }

      .div1 {
        width: 100%;
        height: 0.5rem;
        line-height: 0.5rem;
        padding: 0 0.1rem;
        box-sizing: border-box;
        text-align: center;
        font-size: 0.22rem;
        color: white;
        background: url("../../../assets/images/menu2.png") no-repeat;
        background-size: 100% 100%;
        font-weight: inherit;
      }

      .div1:last-child {
        background: url("../../../assets/images/menu3.png") no-repeat;
        background-size: 100% 120%;
      }
    }

    .title {
      color: #292929;
      font-size: 0.36rem;
      text-align: left;
      width: 5.3rem;
    }

    .detailsTip {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      margin: 0.3rem 0;
      font-size: 0.22rem;
      color: #CECFD3;
      align-items: center;

      .time {
        margin-right: 0.38rem;
      }

      span {
        display: flex;
        flex-direction: row;
      }

      img {
        margin-left: 0.4rem;
      }
    }

    img {
      width: 0.28rem;
      height: 0.23rem;
      display: block;
      margin: auto 0.1rem auto 0;
    }

    #wenzi {
      font-size: 0.28rem;
      line-height: 0.48rem;
      text-align: left;
      color: #6A6D70;
      margin-top: 0.3rem;
      width: 100%;

      img {
        width: 100% !important;
      }
    }
  }
  .btn {
    width: 100%;
    height: 1rem;
    color: white;
    position: fixed;
    z-index: 9999;
    bottom: 0rem;
    left: 0;
    right: 0;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow:0px -4px 12px 0px rgba(240,240,240,0.7);

    input[type='button'] {
      width: 3.48rem;
      height: 0.8rem;
      background: linear-gradient(45deg, rgba(253, 180, 5, 1), rgba(253, 204, 74, 1));
      border: 0;
    }
    .togetherReadingBtn{
      border-radius:0.4rem 0px 0px 0.4rem;
    }
    .lobbyBtn{
      border-radius:0px 0.4rem 0.4rem 0px;
    }
  }
</style>
